<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>세미나룸 예약</title>
<style type="text/css">
	#res_wrap{
		margin-left: 70px;
		font-family:nanum;
		margin-top: 80px;
		margin-bottom: 100px;
	}
	#res_table tr{
		height: 30px;
		text-align: left;
	}
	#res{
		width: 800px;
	}
	#room1{
		position : absolute;
		top: 598px;
		left:709px;
		z-index: 1;
		cursor: pointer;
	}
	#room2{
		position : absolute;
		top: 597.2px;
		left:869px;
		z-index: 1;
		cursor: pointer;
	}
	#room3{
		position : absolute;
		top: 786px;
		left:820px;
		z-index: 1;
		cursor: pointer;
	}
</style>
<script type="text/javascript">

	var clickCount = 0;
	
	/* 강남점 여의도점 체크 */
	function changeImg(){
		var branch = document.getElementById('branch_name').value;
		if(branch == '강남점'){
			document.getElementById('res_image').setAttribute('src', './images/reservation/back2-GN.png');
			document.getElementById('branch_num').value=1;
		} else if( branch == '여의도점'){
			document.getElementById('res_image').setAttribute('src', './images/reservation/back2-Y.png');
			document.getElementById('branch_num').value=2;
		}
	}
	
	/* 현황보기버튼 클릭 */
	function showReserved(){
		
		document.getElementById('room1').setAttribute("src", "images/reservation/room1.jpg");
		document.getElementById('room2').setAttribute("src", "images/reservation/room2.jpg");
		document.getElementById('room3').setAttribute("src", "images/reservation/room3.jpg");
		document.getElementById('room1').removeAttribute("disabled");
		document.getElementById('room2').removeAttribute("disabled");
		document.getElementById('room3').removeAttribute("disabled");
		document.getElementById('room1').setAttribute("style", "cursor:cursor");
		document.getElementById('room2').setAttribute("style", "cursor:cursor");
		document.getElementById('room3').setAttribute("style", "cursor:cursor");
		document.getElementById('room1').setAttribute("title", "1호실은 예약가능합니다.");
		document.getElementById('room2').setAttribute("title", "2호실은 예약가능합니다.");
		document.getElementById('room3').setAttribute("title", "3호실은 예약가능합니다.");
		
		
		var branch_name = document.getElementById('branch_name').value;
		var ask_time = document.getElementById('ask_time').value;
		
		/* 날짜 받아와서 날짜 조건 체크 */
		var ask_date = document.getElementById('ask_date').value;
		
		var ask_year = ask_date.substring(0,4);
		var ask_month = ask_date.substring(5,7);
		var ask_day = ask_date.substring(8,10);
		
		var date = new Date();
		var year = date.getFullYear();
		var month = new String(date.getMonth()+1);
		var day = new String(date.getDate());
		
		if(month.length == 1){
			month = "0" + month;
		}
		
		if(day.length ==1){
			day = "0"+day;
		}
		
		if(ask_date == 0){
			alert('날짜를 입력해주십시오');
			clickCount = 1;
		} else if(ask_year != year || ask_month != month){
			alert('현재 달에 대해서만 예약이 가능합니다');
			clickCount = 1;
		} else if(ask_year == year){
			if(ask_month == month){
				if(ask_day < day +1){
					alert('오늘 날짜보다 1일 후 부터의 예약이 가능합니다.');
					clickCount = 1; // 에러
				} else{
					alert('이용매장은 '+branch_name+'\n날짜는 '+ask_date+'\n이용시간은 '+ask_time+' 을 선택했습니다.\n\n해당 현황은 아래를 참조해주시기 바랍니다.\n예약되지 않은 방을 클릭하면 예약이 진행됩니다.');
					clickCount = 2; // 성공
				}
			}
		}
		
		/* 그림 바꾸기 (카멜이 DB에 저장된 값)*/
		
		var reser_date = ask_year+'-'+ask_month+'-'+ask_day;
		
		var branch_num = document.getElementById('branch_num').value;
		
		var size = document.getElementById('size').value;

		var seminarNumList= [];
		var j=-1;
		
		for(var i=0; i<size; i++){
			
			var branchNum = document.getElementById('branchNum_'+i).value;
			var askDate = document.getElementById('askDate_'+i).value;
			var askTime = document.getElementById('askTime_'+i).value;
	
			if(reser_date == askDate && ask_time == askTime && branch_num == branchNum){
				
				var seminarNum = document.getElementById('seminarNum_'+i).value;
				
				if(branch_num == '2'){
					seminarNum = seminarNum -3;
				}

				j = j+1;
				seminarNumList[j] = seminarNum;
			}
		}
		
		for(var i=0; i<size; i++){
			
			var branchNum = document.getElementById('branchNum_'+i).value;
			var askDate = document.getElementById('askDate_'+i).value;
			var askTime = document.getElementById('askTime_'+i).value;
	
			if(reser_date == askDate && ask_time == askTime && branch_num == branchNum){
			
			if(j == 0){
				if(seminarNumList[0] == 1){
					document.getElementById('room1').setAttribute("src", "images/reservation/room1-1.jpg");
					document.getElementById('room1').setAttribute("disabled", "disabled");
					document.getElementById('room1').setAttribute("style", "cursor:default");
					document.getElementById('room1').setAttribute("title", "1호실은 이미 예약되어 있습니다!");
					
					document.getElementById('room2').setAttribute("src", "images/reservation/room2.jpg");
					document.getElementById('room2').setAttribute("title", "2호실은 예약가능합니다.");
					document.getElementById('room2').setAttribute("style", "cursor:cursor");

					document.getElementById('room3').setAttribute("src", "images/reservation/room3.jpg");
					document.getElementById('room3').setAttribute("title", "3호실은 예약가능합니다.");
					document.getElementById('room3').setAttribute("style", "cursor:cursor");
					
				} else if(seminarNumList[0] == 2){
					document.getElementById('room2').setAttribute("src", "images/reservation/room2-1.jpg");
					document.getElementById('room2').setAttribute("disabled", "disabled");
					document.getElementById('room2').setAttribute("style", "cursor:default");
					document.getElementById('room2').setAttribute("title", "2호실은 이미 예약되어 있습니다!");
					
					document.getElementById('room1').setAttribute("src", "images/reservation/room1.jpg");
					document.getElementById('room1').setAttribute("title", "1호실은 예약가능합니다.");
					document.getElementById('room1').setAttribute("style", "cursor:cursor");
					
					document.getElementById('room3').setAttribute("src", "images/reservation/room3.jpg");
					document.getElementById('room3').setAttribute("title", "3호실은 예약가능합니다.");
					document.getElementById('room3').setAttribute("style", "cursor:cursor");
					
				} else if(seminarNumList[0] == 3){
					document.getElementById('room3').setAttribute("src", "images/reservation/room3-1.jpg");
					document.getElementById('room3').setAttribute("disabled", "disabled");
					document.getElementById('room3').setAttribute("style", "cursor:default");
					document.getElementById('room3').setAttribute("title", "3호실은 이미 예약되어 있습니다!");
					
					document.getElementById('room1').setAttribute("src", "images/reservation/room1.jpg");
					document.getElementById('room1').setAttribute("title", "1호실은 예약가능합니다.");
					document.getElementById('room1').setAttribute("style", "cursor:cursor");
					
					document.getElementById('room2').setAttribute("src", "images/reservation/room2.jpg");
					document.getElementById('room2').setAttribute("title", "2호실은 예약가능합니다.");
					document.getElementById('room2').setAttribute("style", "cursor:cursor");
				} 
			} else if(j == 1){
				if(seminarNumList[0] == 1){
					
					document.getElementById('room1').setAttribute("src", "images/reservation/room1-1.jpg");
					document.getElementById('room1').setAttribute("disabled", "disabled");
					document.getElementById('room1').setAttribute("style", "cursor:default");
					document.getElementById('room1').setAttribute("title", "1호실은 이미 예약되어 있습니다!");
					
					if(seminarNumList[1] == 2){
						
						document.getElementById('room2').setAttribute("src", "images/reservation/room2-1.jpg");
						document.getElementById('room2').setAttribute("disabled", "disabled");
						document.getElementById('room2').setAttribute("style", "cursor:default");
						document.getElementById('room2').setAttribute("title", "2호실은 이미 예약되어 있습니다!");
						
						document.getElementById('room3').setAttribute("src", "images/reservation/room3.jpg");
						document.getElementById('room3').setAttribute("title", "3호실은 예약가능합니다.");
						document.getElementById('room3').setAttribute("style", "cursor:cursor");
						
					} else if(seminarNumList[1] == 3){
						
						document.getElementById('room2').setAttribute("src", "images/reservation/room2.jpg");
						document.getElementById('room2').setAttribute("title", "2호실은 예약가능합니다.");
						document.getElementById('room2').setAttribute("style", "cursor:cursor");
						
						document.getElementById('room3').setAttribute("src", "images/reservation/room3-1.jpg");
						document.getElementById('room3').setAttribute("disabled", "disabled");
						document.getElementById('room3').setAttribute("style", "cursor:default");
						document.getElementById('room3').setAttribute("title", "3호실은 이미 예약되어 있습니다!");
						
					}
				}
				if(seminarNumList[0] == 2){
					
					document.getElementById('room2').setAttribute("src", "images/reservation/room2-1.jpg");
					document.getElementById('room2').setAttribute("disabled", "disabled");
					document.getElementById('room2').setAttribute("style", "cursor:default");
					document.getElementById('room2').setAttribute("title", "2호실은 이미 예약되어 있습니다!");
					
					if(seminarNumList[1] == 1){
						
						document.getElementById('room1').setAttribute("src", "images/reservation/room1-1.jpg");
						document.getElementById('room1').setAttribute("disabled", "disabled");
						document.getElementById('room1').setAttribute("style", "cursor:default");
						document.getElementById('room1').setAttribute("title", "1호실은 이미 예약되어 있습니다!");
						
						document.getElementById('room3').setAttribute("src", "images/reservation/room3.jpg");
						document.getElementById('room3').setAttribute("title", "3호실은 예약가능합니다.");
						document.getElementById('room3').setAttribute("style", "cursor:cursor");
						
					} else if(seminarNumList[1] == 3){
						
						document.getElementById('room1').setAttribute("src", "images/reservation/room1.jpg");
						document.getElementById('room1').setAttribute("title", "1호실은 예약가능합니다.");
						document.getElementById('room1').setAttribute("style", "cursor:cursor");
						document.getElementById('room1').removeAttribute("disabled");
						
						document.getElementById('room3').setAttribute("src", "images/reservation/room3-1.jpg");
						document.getElementById('room3').setAttribute("disabled", "disabled");
						document.getElementById('room3').setAttribute("style", "cursor:default");
						document.getElementById('room3').setAttribute("title", "3호실은 이미 예약되어 있습니다!");
						
					}
					
				}
				if(seminarNumList[0] == 3){
					
					document.getElementById('room3').setAttribute("src", "images/reservation/room3-1.jpg");
					document.getElementById('room3').setAttribute("disabled", "disabled");
					document.getElementById('room3').setAttribute("style", "cursor:default");
					document.getElementById('room3').setAttribute("title", "3호실은 이미 예약되어 있습니다!");
					
					if(seminarNumList[1] == 1){
						
						document.getElementById('room1').setAttribute("src", "images/reservation/room1-1.jpg");
						document.getElementById('room1').setAttribute("disabled", "disabled");
						document.getElementById('room1').setAttribute("style", "cursor:default");
						document.getElementById('room1').setAttribute("title", "1호실은 이미 예약되어 있습니다!");
						
						document.getElementById('room2').setAttribute("src", "images/reservation/room2.jpg");
						document.getElementById('room2').setAttribute("title", "2호실은 예약가능합니다.");
						document.getElementById('room2').setAttribute("style", "cursor:cursor");
						
					} else if(seminarNumList[1] == 2){
						
						document.getElementById('room1').setAttribute("src", "images/reservation/room1.jpg");
						document.getElementById('room1').setAttribute("title", "1호실은 예약가능합니다.");
						document.getElementById('room1').setAttribute("style", "cursor:cursor");
						
						document.getElementById('room2').setAttribute("src", "images/reservation/room2-1.jpg");
						document.getElementById('room2').setAttribute("disabled", "disabled");
						document.getElementById('room2').setAttribute("style", "cursor:default");
						document.getElementById('room2').setAttribute("title", "2호실은 이미 예약되어 있습니다!");
						
					}
				}
				
			} else if(j == 2){
				document.getElementById('room1').setAttribute("src", "images/reservation/room1-1.jpg");
				document.getElementById('room1').setAttribute("disabled", "disabled");
				document.getElementById('room1').setAttribute("style", "cursor:default");
				document.getElementById('room1').setAttribute("title", "1호실은 이미 예약되어 있습니다!");
				
				document.getElementById('room2').setAttribute("src", "images/reservation/room2-1.jpg");
				document.getElementById('room2').setAttribute("disabled", "disabled");
				document.getElementById('room2').setAttribute("style", "cursor:default");
				document.getElementById('room2').setAttribute("title", "2호실은 이미 예약되어 있습니다!");
				
				document.getElementById('room3').setAttribute("src", "images/reservation/room3-1.jpg");
				document.getElementById('room3').setAttribute("disabled", "disabled");
				document.getElementById('room3').setAttribute("style", "cursor:default");
				document.getElementById('room3').setAttribute("title", "3호실은 이미 예약되어 있습니다!");
				
				}
			}
		}
	}
	
	/* 세미나룸번호 값 히든 셋팅 */
	function setNum(roomId){
		
		var seminar_num = document.getElementById('seminar_num');
		
		if(roomId == 'room1'){
			seminar_num.value = 1;
		} else if(roomId == 'room2'){
			seminar_num.value = 2;
		} else if(roomId == 'room3'){
			seminar_num.value = 3;
		}
	}
	
	/* 카운트 값 셋팅 */
	function setCount(){
		clickCount = 0;
	}
	
	/* 폼 제출하기전에 마지막 확인 */
	function totalCheck(){
		if(clickCount == 0){
			alert('현황보기 버튼을 클릭하신 후, 세미나룸 예약을 진행해 주십시오');
			return false;
		} else if(clickCount == 1){
			alert('예약 날짜를 확인해주신 후, 세미나룸 예약을 진행해 주십시오');
			return false;
		}
	}
</script>
</head>
<body>
<!-- 자바스크립트 데이터 처리 -->
<input type="hidden" id="size" value="${size}">
<c:if test="${size>0}">
<c:forEach var="i" begin="0" end="${size-1}" step="1">
	<input type="hidden" id="branchNum_${i}" value="${reservationList[i].branch_num}">
	<input type="hidden" id="askDate_${i}" value="${reservationList[i].ask_date}">
	<input type="hidden" id="askTime_${i}" value="${reservationList[i].ask_time}">
	<input type="hidden" id="seminarNum_${i}" value="${reservationList[i].seminar_num}">
</c:forEach>
</c:if>
<!-- 자바스크립트 데이터 처리 -->
<div id="res_wrap" style="height: 850px;">
	<div>
		<img src="./images/reservation/seminar_title.png">
		<form action="reservation.do" method="POST" onsubmit="return totalCheck()">
		<table id="res_table">
			<tr>
				<th width="100px;">이용매장</th>
				<td>
					<select name="branch_name" id="branch_name" onclick="changeImg()" 
					 		style="font-family: nanum; width: 125px;" onchange="setCount()">
						<c:forEach var="i" begin="0" end="1" step="1">
							<option value="${branchList[i].branch_name}">${branchList[i].branch_name}</option>
						</c:forEach>
					</select>
				</td>
			</tr>
			<tr>
				<th>날짜</th>
				<td><input type="date" name="ask_date" id="ask_date" value="0"
						   style="font-family: nanum;" onchange="setCount()"></td>
			</tr>
			<tr>
				<th>이용시간</th>
				<td>
					<select name="ask_time" id="ask_time" 
							style="font-family: nanum; width: 125px;" onchange="setCount()">
						<option value="11:00 ~ 2:00">11:00 ~ 2:00</option>
						<option value="2:00 ~ 5:00">2:00 ~ 5:00</option>
						<option value="5:00 ~ 8:00">5:00 ~ 8:00</option>
					</select>&nbsp;
					<input type="button" value="현황보기" 
						   style="font-family: nanum;" onclick="showReserved()">
				</td>
			</tr>
		</table>
		<br><br>
		<table id="res_table">
			<tr>
				<td colspan="2"><img src="./images/reservation/1pc.png" title="컴퓨터">컴퓨터 &nbsp;&nbsp;
								<img src="./images/reservation/1child.png" title="놀이시설">놀이시설 &nbsp;&nbsp;
								<img src="./images/reservation/1wifi.png" title="와이파이">와이파이 &nbsp;&nbsp;
								<img src="./images/reservation/1smoke.png" title="흡연실">흡연실 &nbsp;&nbsp;<br>
				</td>
			</tr>
			<tr>
				<td colspan="2"> 최대수용인원 : 1&nbsp; - &nbsp;6명 &nbsp; /&nbsp;  2&nbsp; - &nbsp;8명&nbsp;  / &nbsp; 3&nbsp; - &nbsp;10명 </td>
			</tr>
			<tr>
				<td colspan="2"> 이용금액 : 1&nbsp; -&nbsp; 10,000원 &nbsp;/&nbsp; 2 &nbsp;-&nbsp;15,000원 &nbsp;/&nbsp;3&nbsp;-&nbsp;20,000원 (음료 미포함)</td>
			</tr>
			
			<!-- 정보 넘기는 곳 -->
			<tr>
				<td colspan="2">
					<div id="res" style="margin-left: 10px;">
						<img src="./images/reservation/back2-GN.png" id="res_image" 
							 style="z-index: 0; position:absolute;">
						<input type="hidden" id="branch_num" name="branch_num" value="1">
						  <input type="image" src="./images/reservation/room1.jpg" id="room1" 
						  		 title="1호실은 예약가능합니다." onclick="setNum(this.id)">
						  <input type="image" src="./images/reservation/room2.jpg" id="room2" 
						  		 title="2호실은 예약가능합니다." onclick="setNum(this.id)">
						  <input type="image" src="./images/reservation/room3.jpg" id="room3"
						  		 title="3호실은 예약가능합니다." onclick="setNum(this.id)">
					</div>
				</td>
			</tr>
		</table>
		<input type="hidden" id="seminar_num" name="seminar_num">
		<div style="margin-top: 490px; margin-left:380px; color:#870200; font-weight: bold; font-size: 14pt;">
			※ 원하시는 세미나룸을 클릭하시면, 예약이 진행됩니다!</div>
		</form>
	</div>
</div>
</body>
</html>